<template>
    <el-table ref="competeTable"
              :data="data.SessionCompetes" border :height="tableHeight"
              :row-class-name="tableRowClassName"
              @current-change="handleCurrentChange" 
              style="width: 100%; color: blue;" >
        <el-table-column align="center" prop="SerialNo" label="序号" width="80" height="30"></el-table-column>
        <el-table-column align="center" prop="Compete.PassportNo" label="通行证"></el-table-column>
        <el-table-column align="center" :label="'姓名' + (hasEnsemble?'/团队':'')">
            <template slot-scope="scope">
                <span v-if="scope.row.Compete.Passport != null">{{scope.row.Compete.Passport.User.Name}}</span>
                <span v-if="scope.row.Compete.Team != null">
                    <li class="fa fa-users"></li>{{scope.row.Compete.Team.Name}}
                </span>
            </template>            
        </el-table-column>
        <el-table-column align="center" label="国家地区">
            <template slot-scope="scope">
                <span v-if="scope.row.Compete.Team!=null">{{scope.row.Compete.Team.Leader.User | country}}</span>
                <span v-if="scope.row.Compete.Passport!=null">{{scope.row.Compete.Passport.User | country}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="团队成员" v-if="hasEnsemble">
            <template slot-scope="scope" v-if="scope.row.Compete.Team!=null">
                <div v-for="(member, index) in scope.row.Compete.Team.Members" style="display: inline;">
                    <span>{{member.User.Name}}</span>                    
                    <span v-if="index < scope.row.Compete.Team.Members.length-1">, </span>
                </div>
            </template>            
        </el-table-column>
        <el-table-column align="center" prop="Compete.MusicName" label="曲目"></el-table-column>
        <el-table-column align="center" prop="Compete.Accompany" label="伴奏"></el-table-column>
    </el-table>    
</template>

<script>

import {CountryFormat} from 'web/utils';

export default {
    props: {
        'data': {
            type: Object,
            default: null
        },
    },
    filters: {
        country: CountryFormat
    },  
    data() {
        return {
            hasEnsemble: false,
            tableHeight: 250,
            curIndex: -1
        }
    },
    watch: {
        data: {
            handler: function (newVal, oldVal) {
                // 遍历数据集中是否存在独奏或者重奏
                for(let sc of this.data.SessionCompetes) {
                    let compete = sc.Compete;
                    if (compete.Team != null) {
                        this.hasEnsemble = true;
                        break;
                    }
                }               
            },
            deep: true
        }
    },
    mounted() {
        const me = this;
        window.onresize = () => {
            if(me.timer != null) {
                clearTimeout(me.timer);
                me.timer = null;
            }
            me.timer = setTimeout(function () {
                me.adjustHeight();
                me.timer = null;
            }, 400);
        }
        setTimeout(function () {
            me.adjustHeight();
        }, 500);                
    },
    methods: {

        adjustHeight() {
            this.tableHeight = window.innerHeight - $('#competeTable').offset().top - 155;         
        },

        selectRow(index) {
            this.curIndex = index;
            $('.ppt .el-table__body-wrapper').scrollTop(this.curIndex*47);
        },

        tableRowClassName({row, rowIndex}) {            
            if (rowIndex == this.curIndex) {                
                return 'success-row';
            }
            return '';
        },

        handleCurrentChange(val) {
            this.curIndex = val.SortIndex-1;
            this.$emit('currentCompeteChanged', this.curIndex);
        }
    }
}
</script>

<style>
.ppt .cell {
    color: darkblue;
    line-height: 30px;
}

.ppt .el-table .success-row {
    background: lightgreen;
}
</style>
